<style lang="less">
    @import "../../../styles/table.less";
    .name{
        color: #faad14;
    }
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" ref="table"></Table>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal v-model="picVisible" title="图片" draggable>
            <img :src="fileUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;">
        </Modal>
        <share-drawer ref="shareDrawer"></share-drawer>
    </div>
</template>

<script>
    import circleLoading from "../../my-components/circle-loading.vue";
    import shareDrawer from "./share-drawer";
    import {getPoster} from "@/api/index";
    export default {
        name: "poster-manage",
        components: {
            shareDrawer,
            circleLoading
        },
        data() {
            return {
                fileUrl: '',
                picVisible: false,
                loading: false, // 表单加载状态
                columns: [
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "海报上部",
                        key: "xcxHeard",
                        align: "center",
                        render: (h, params) => {
                            return h("img", {
                                attrs: {
                                    src: params.row.xcxHeard.configVal,
                                    alt: "加载图片失败"
                                },
                                style: {
                                    cursor: "pointer",
                                    width: "80px",
                                    height: "60px",
                                    margin: "10px 0",
                                    "object-fit": "contain"
                                },
                                on: {
                                    click: () => {
                                        this.showPic(params.row.xcxHeard.configVal);
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: "海报logo",
                        key: "xcxLeft",
                        align: "center",
                        render: (h, params) => {
                            return h("img", {
                                attrs: {
                                    src: params.row.xcxLeft.configVal,
                                    alt: "加载图片失败"
                                },
                                style: {
                                    cursor: "pointer",
                                    width: "80px",
                                    height: "60px",
                                    margin: "10px 0",
                                    "object-fit": "contain"
                                },
                                on: {
                                    click: () => {
                                        this.showPic(params.row.xcxLeft.configVal);
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: "海报二维码",
                        key: "xcxRight",
                        align: "center",
                        render: (h, params) => {
                            return h("img", {
                                attrs: {
                                    src: params.row.xcxRight.configVal,
                                    alt: "加载图片失败"
                                },
                                style: {
                                    cursor: "pointer",
                                    width: "80px",
                                    height: "60px",
                                    margin: "10px 0",
                                    "object-fit": "contain"
                                },
                                on: {
                                    click: () => {
                                        this.showPic(params.row.xcxRight.configVal);
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 280,
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.edit(params.row);
                                            }
                                        }
                                    },
                                    "编辑"
                                )
                            ]);
                        }
                    }],
                data: [],
            }
        },
        methods: {
            init() {
                this.getDataList();
            },
            getDataList() {
                this.loading = true;
                getPoster().then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        this.data = res.data;
                    }
                });
            },
            showPic(v) {
                this.fileUrl = v;
                this.picVisible = true;
            },
            edit(v) {
                this.$refs.shareDrawer.showDrawer();
            },
        },
        mounted() {
            this.init();
        }
    }
</script>
